<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>

    </ul>
    <!-- 生成十个li -->

    <!-- https://blog.csdn.net/weixin_38547641/article/details/110250470 -->


    <!-- 如何事件代理 监听10个li的事件 并打印innerText-->
    <script>
        window.onload = function () {
            let now = new Date()
            
            let ul = document.querySelector('.ul')

            // 插入模版字符串
            let str = ''
            for (let i = 0; i < 10000; i++) {
                str += `<li>${i}</li>`
            }
            ul.innerHTML = str

            // 时间代理
            ul.addEventListener('click', function (event) {
                let e = event || window.event
                let target = e.target || e.srcElement
                if (target.nodeName.toLowerCase() === 'li') {
                    console.log(target.innerHTML)
                }

            })
            console.log(new Date() - now);
        }
    </script>
</body>

</html>